﻿<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath() + "/";
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<base href="<%=basePath%>">
		<title>素材</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="css/style2/d_common.css">
		<link rel="stylesheet" href="css/style2/common1.css">
		<style type="text/css">
			.back {
				position: fixed;
				width: 100%;
				height: 100%;
				top: 0px;
				left: 0px;
				z-index: 0;
			}
			
			.back img {
				position: absolute;
				width: 100%;
				height: 100%;
			}
			
			.toptip {
				position: relative;
				height: 60px;
				line-height: 60px;
				width: 94%;
				padding: 0 3%;
				background: #1e6198;
			}
			
			.toptip .title {
				position: relative;
				display: inline-block;
				font-size: 20px;
				color: #fff;
			}
			
			.toptip .clock {
				position: relative;
				float: right;
				font-size: 20px;
				color: #fff;
			}
			
			.main-read {
				padding: 0px;
				height: 550px;
				margin-bottom: 20px;
				margin-top: 3.5%;
			}
			
			.backdiv {
				background: #1e6198;
				filter: alpha(opacity=40);
				opacity: 0.4;
				-webkit-opacity: 0.4;
				-moz-opacity: 0.4;
				-khtml-opacity: 0.4;
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0px;
				top: 0px;
			}
			
			.part-noVideo {
				position: relative;
				margin-top: 20px;
				width: 97%;
				padding: 0px 1.5%;
			}
			
			#btn{
				position: relative;
				text-align: center;
			}
			.speed-btn {
			    background-color: #196db5;
			    font-size: 40px;
			    bottom: 0px;
			    right: 10px;
			    position: relative;
			    border-top: 1px solid #c5c0c0;
			    border-left: 3px solid #c5c0c0;
			    border-bottom: 3px solid rgba(0,0,0,0.25); 
    			border-right: 1px solid rgba(0,0,0,0.25); 
			}
		   .re-select{
		   		width: 130px;
		   		padding-left: 30px;
		   		font-size: 20px;
		   		background: url("css/style2/img/re-select.png") 8px #196db5 no-repeat;
		   	}.re-select:hover{
		   		color:#fff;
		   	}
			
		</style>
	</head>

	<body style="background-image:none">
		<div id="back" class="back">
			<img src="css/style2/img/ds_back.png" />
		</div>
		<!--end back-->

		<div class="main main-read">
			<div class="backdiv"></div>
			<p class="toptip">
				<span class="title">${material.title }</span>
				<%--<a class="clock"><span id="minute">00</span>:<span id="second">00</span></a>
			--%></p>

			<div class="part-noVideo ">
				<div class="type pictype">
					<img src="css/style2/img/literature.png" alt=""><br> <span>文学</span>
				</div>
				<div class="video part-Video hide">
					<div id="vd"></div>
				</div>
				<div class="artical">
					<div class="articalMain">
						<marquee id="marquee" direction="up" scrolldelay="100" behavior="scroll" contenteditable="true" scrollamount="2" width="100%" height='400px' onmouseover="this.stop();" onmouseout="this.start();">
							<h3 style="color:#000;">${material.title }</h3>
							<p style="color:#000;">${material.content }</p>
						</marquee>
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		
		<script src="js/jquery-1.9.1.js"></script>
		<script>
			//打开自动播放
			var height = $('.artical').height();
			var p = 0;
			$('.nBtn').click(function() {
				if(height > 400 * (p + 1)) {
					p++;
					$('.artical').css('top', (-390 * p) + 'px');
				}
			});
			$('.pBtn').click(function() {
				if(p > 0) {
					p--;
					$('.artical').css('top', (-390 * p) + 'px');
				}
			});

			//设置字幕速度
			var speed = $("marquee").attr("scrollamount")

			function changeSpeed(val) {
				var marquee = $('marquee').html()
				setTimeout(
					function() {
						if(val > 0) {
							speed++;
							if(speed > 6) {
								speed = 6
							}
							$("marquee").attr("scrollamount", speed).html(
								marquee)
							//回流DOM 重新添加marquee内容
							$(".articalMain")
								.html(
									'<marquee scrollamount="' +
									speed +
									'" direction="up" scrolldelay="100" behavior="scroll" contenteditable="true" width="100%" height=\'400px\' onmouseover="this.stop();" onmouseout="this.start();">' +
									marquee + '</marquee>')
						} else {
							speed--;
							if(speed < 0) {
								speed = 1
							}
							$("marquee").attr("scrollamount", speed)
							$(".articalMain")
								.html(
									'<marquee scrollamount="' +
									speed +
									'" direction="up" scrolldelay="100" behavior="scroll" contenteditable="true" width="100%" height=\'400px\' onmouseover="this.stop();" onmouseout="this.start();">' +
									marquee + '</marquee>')
						}
					}, 200)
			}

			function stopbtn(obj) {
				if($(obj).attr("class") == "speed-btn stop-btn") {
					$(obj).removeClass("stop-btn");
					$(obj).addClass("stop-btn2");
					document.getElementById('marquee').stop();
				} else {
					$(obj).removeClass("stop-btn2");
					$(obj).addClass("stop-btn");
					document.getElementById('marquee').start();
				}

			};

		</script>
	</body>

</html>